// 导入Lucide React图标库中的MessageCircle图标组件
import { MessageCircle } from 'lucide-react';

// 定义消息接口类型
interface Message {
  id: string; // 消息唯一标识
  type: 'assistant' | 'system' | 'appointment' | 'prescription'; // 消息类型
  sender: string; // 发送者名称
  content: string; // 消息内容
  time: string; // 发送时间
  isRead: boolean; // 是否已读
  avatar?: string; // 头像（可选）
}

// 定义消息数据数组
const messages: Message[] = [
  {
    id: '1', // 消息ID
    type: 'assistant', // 消息类型：助理消息
    sender: '妙手助理小妙', // 发送者：妙手助理小妙
    content: '近期热门推荐', // 消息内容
    time: '刚刚', // 发送时间
    isRead: false, // 未读状态
    avatar: '🌄' // 头像表情
  },
  {
    id: '2', // 消息ID
    type: 'system', // 消息类型：系统通知
    sender: '系统通知', // 发送者：系统通知
    content: '您的账户已通过实名认证', // 消息内容
    time: '2小时前', // 发送时间
    isRead: true, // 已读状态
    avatar: '🔔' // 头像表情
  },
  {
    id: '3', // 消息ID
    type: 'appointment', // 消息类型：预约提醒
    sender: '预约提醒', // 发送者：预约提醒
    content: '您预约的妇产科门诊将在明天上午9点开始', // 消息内容
    time: '1天前', // 发送时间
    isRead: true, // 已读状态
    avatar: '📅' // 头像表情
  },
  {
    id: '4', // 消息ID
    type: 'prescription', // 消息类型：处方通知
    sender: '处方通知', // 发送者：处方通知
    content: '您的处方已开具完成，药品将在24小时内配送', // 消息内容
    time: '2天前', // 发送时间
    isRead: true, // 已读状态
    avatar: '💊' // 头像表情
  }
];

/**
 * 消息页面组件 - 医生消息中心
 * 
 * 功能特性：
 * - 消息列表展示
 * - 消息类型分类
 * - 已读/未读状态显示
 * - 消息时间显示
 * - 消息头像展示
 * 
 * 消息类型：
 * - assistant: 助理消息（推荐、提醒等）
 * - system: 系统通知（认证、更新等）
 * - appointment: 预约提醒（门诊、检查等）
 * - prescription: 处方通知（药品、配送等）
 * 
 * 消息结构：
 * - id: 消息唯一标识
 * - type: 消息类型
 * - sender: 发送者名称
 * - content: 消息内容
 * - time: 发送时间
 * - isRead: 是否已读
 * - avatar: 头像（表情符号）
 * 
 * 样式特性：
 * - 未读消息：蓝色背景和边框
 * - 已读消息：白色背景
 * - 响应式设计
 * - 阴影和过渡效果
 * 
 * 页面布局：
 * - 顶部标题栏
 * - 功能按钮区域
 * - 消息列表区域
 * - 消息项卡片布局
 * 
 * @returns {JSX.Element} 消息页面组件
 */
export default function MessagesPage() {
  // 返回JSX结构
  return (
    // 主容器，设置最小高度和背景色
    <div className="min-h-full bg-white">
      {/* 页面顶部标题区域 - 直接占满宽度 */}
      <div className="px-4 py-6 flex items-center justify-between">
        {/* 左侧占位区域，用于保持标题居中 */}
        <div className="flex-1" />
        {/* 居中标题 */}
        <h1 className="text-2xl font-bold text-gray-900">医生消息</h1>
        {/* 右侧功能区域 */}
        <div className="flex-1 flex justify-end">
          {/* 右侧药丸形状按钮 */}
          <div className="bg-white border border-gray-200 rounded-full px-3 py-2 flex items-center space-x-1">
            {/* 三个小圆点 */}
            <div className="w-1 h-1 bg-gray-600 rounded-full"></div>
            <div className="w-1 h-1 bg-gray-600 rounded-full"></div>
            <div className="w-1 h-1 bg-gray-600 rounded-full"></div>
            {/* 分隔线 */}
            <div className="w-px h-4 bg-gray-300 mx-2"></div>
            {/* 短横线 */}
            <div className="w-3 h-0.5 bg-gray-600"></div>
            {/* 分隔线 */}
            <div className="w-px h-4 bg-gray-300 mx-2"></div>
            {/* 带内圆的大圆点 */}
            <div className="w-2 h-2 bg-gray-600 rounded-full relative">
              <div className="w-1 h-1 bg-gray-600 rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>
            </div>
          </div>
        </div>
      </div>

      {/* 消息列表区域 */}
      <div className="px-4 py-4">
        {/* 消息项容器，设置垂直间距 */}
        <div className="space-y-3">
          {/* 遍历渲染消息列表 */}
          {messages.map((message) => (
            <div
              key={message.id} // 设置唯一key
              className={`rounded-xl p-4 shadow-sm border transition-all duration-200 ${
                !message.isRead 
                  ? 'bg-blue-50 border-blue-200 ring-2 ring-blue-100' // 未读消息样式
                  : 'bg-white border-gray-100' // 已读消息样式
              }`}
            >
              {/* 消息内容布局 */}
              <div className="flex items-start space-x-3">
                {/* 头像区域 */}
                <div className="flex-shrink-0 mt-1">
                  {/* 头像容器 */}
                  <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center text-lg">
                    {message.avatar} {/* 显示头像表情 */}
                  </div>
                </div>
                {/* 消息文本内容区域 */}
                <div className="flex-1 min-w-0">
                  {/* 发送者和时间区域 */}
                  <div className="flex items-center justify-between mb-2">
                    {/* 发送者名称 */}
                    <h3 className="text-sm font-semibold text-gray-900">
                      {message.sender}
                    </h3>
                    {/* 发送时间标签 */}
                    <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded-full">
                      {message.time}
                    </span>
                  </div>
                  {/* 消息内容文本 */}
                  <p className="text-sm text-gray-600 leading-relaxed">
                    {message.content}
                  </p>
                  {/* 未读状态指示器 */}
                  {!message.isRead && (
                    <div className="flex items-center mt-2">
                      {/* 未读红点，带有脉冲动画 */}
                      <div className="w-2 h-2 bg-red-500 rounded-full mr-2 animate-pulse"></div>
                      {/* 未读文本标签 */}
                      <span className="text-xs text-red-500 font-medium">未读</span>
                    </div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 空状态显示区域 - 当没有消息时显示 */}
      {messages.length === 0 && (
        <div className="flex flex-col items-center justify-center py-12 px-4">
          {/* 空状态图标 */}
          <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
            <MessageCircle className="text-gray-400" size={32} />
          </div>
          {/* 空状态提示文本 */}
          <p className="text-gray-500 text-center">暂无消息</p>
          {/* 空状态副提示文本 */}
          <p className="text-sm text-gray-400 text-center mt-1">开始咨询医生，获取专业建议</p>
        </div>
      )}
    </div>
  );
} 